<!DOCTYPE HTML>
<html>
<head>
	<title>TinCase</title>
	<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
	<link rel="stylesheet"type="text/css"href="css/normalize.css">
	<link rel="stylesheet"type="text/css"href="css/main.css">
	<script type="text/javascript"src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
	<div id="content">
		<h1 id="title-header">TinCase</h1>
		
		<div class="html-control control-checkbox">
			<span class="control-title">Enable Debug Rendering</span>
			<input type="checkbox" id="checkbox01"/>
		</div>

		<div class="engine-control">
			<table cellspacing="0">
				<tbody>
					<tr>
						<th>Key/Mouse</th><th>Physics Control</th>
					</tr>
					<tr>
						<td class="key">W,A,S,D</td>
						<td>Movement</td>
					</tr>
					<tr>
						<td class="key">Space/Middle Mouse Button</td>
						<td>Fire Box</td>
					</tr>
					<tr>
						<td class="key">R</td>
						<td>Reset</td>
					</tr>
					<tr>
						<td class="mouse">Right/Left click (hold)</td>
						<td>Manipulate shape under crosshair</td>
					</tr>
					<tr>
						<td class="key">Enter</td>
						<td>Toggle full screen</td>
					</tr>
					<tr>
						<td class="key">Escape</td>
						<td>Release mouse pointer</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div id="engine-object">
			<div id="engine-wrapper">
				<!--
				HTML to create a plugin or canvas instance.
				Supplied by'tz_engine_div'variable.
				-->
				
        <canvas id="turbulenz_game_engine_canvas" moz-opaque="true" tabindex="1">
            Sorry, but your browser does not support WebGL or does not have it
            enabled.  To get a WebGL-enabled browser, please see:<br/>
            <a href="http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" target="_blank">
                Getting a WebGL Implementation
            </a>
        </canvas>

        <script type="text/javascript">
            var canvasSupported = true;
            (function()
            {
                var contextNames = ["webgl", "experimental-webgl"];
                var context = null;
                var canvas = document.createElement('canvas');

                document.body.appendChild(canvas);

                for (var i = 0; i < contextNames.length; i += 1)
                {
                    try {
                        context = canvas.getContext(contextNames[i]);
                    } catch (e) {}

                    if (context) {
                        break;
                    }
                }
                if (!context)
                {
                    canvasSupported = false;
                    window.alert("Sorry, but your browser does not support WebGL or does not have it enabled.");
                }

                document.body.removeChild(canvas);
            }());
            var TurbulenzEngine = {};
        </script>
				<script type="text/javascript">
					var pw = $('#engine-object').width();
					// Calculate aspect ratio
					var ph = pw * 9/16;

					// Resize element for plugin or canvas to fill
					$('#engine-wrapper').css({
						height: ph,
						width: pw
					});
				</script>
			</div>
		</div>
		<p id="game-details" class="game-info"></p>
		<span id="versions" class="game-info">
			<span class="sdk">
				SDK version:
				<span id="sdk_version"></span>
				<span id="sdk_alert"></span>
			</span>
			<span class="engine">
				Engine version:
				<span id="engine_version">0.0.0</span>
				<span id="engine_alert"></span>
			</span>
		</span>
		<span class="copyright game-info">TinCase &copy; 2014 <a href="mailto:7inpham@gmail.com">7inpham</a></span>
	</div>
	<script>
		var config = {
			title: "TinCase",
			version: "0.5",
			sdk_version: "0.28.0.0",
			language: "English",
			allowAlerts: false
		};
		document.title = config.title + " powered By Turbulenz";
		document.getElementById("sdk_version").innerHTML = config.sdk_version;
		document.getElementById("game-details").innerHTML = config.title + " | v" + config.version + " | " + config.language;
	</script>
	
	<!--begin'tz_include_js'variable-->
    
<script type="text/javascript" src="tincase.canvas.js"></script>
	<!--end'tz_include_js'variable-->
	
	<script type="text/javascript">
	// ----------------------------------------
	// Embedded code and startup code.
	// Supplied by 'tz_startup_code' variable.
	// ----------------------------------------
    
        // Engine startup
        window.onload = function ()
        {
            var appEntry = TurbulenzEngine.onload;
            var appShutdown = TurbulenzEngine.onunload;
            if (!appEntry) {
                window.alert("TurbulenzEngine.onload has not been set");
                return;
            }

            var canvas =
                document.getElementById('turbulenz_game_engine_canvas');

            var startCanvas = function startCanvasFn()
            {
                if (canvas.getContext && canvasSupported)
                {
                    TurbulenzEngine = WebGLTurbulenzEngine.create({
                        canvas: canvas,
                        fillParent: true
                    });

                    if (!TurbulenzEngine) {
                        window.alert("Failed to init TurbulenzEngine (canvas)");
                        return;
                    }

                    TurbulenzEngine.onload = appEntry;
                    TurbulenzEngine.onunload = appShutdown;
                    appEntry()
                }
            }

            var previousOnBeforeUnload = window.onbeforeunload;
            window.onbeforeunload = function ()
            {
                if (TurbulenzEngine.onunload) {
                    TurbulenzEngine.onunload.call(this);
                }
            };  // window.beforeunload

            startCanvas();
        };  // window.onload()

	</script>
</body>
</html>